{literal}
<script type="text/javascript">
	function prev(link)
	{
		$('#form').attr('action', link);
		$('#form').submit();
	}
</script>
{/literal}
<div class="panelTabs">
			<div class="tabs">
				<a class="label" title="Categories">{'Step 3 of 3'|t}</a>
			</div>
		</div>
		<div class="backgroundFrame970Top"></div>
		<div class="backgroundFrame970">
			<div class="content">

			<h1>Player gear</h1>





				<div class="panelQuiz">

					<div class="form">
						<form method="post" action="{url label=registrationQuizFinal}" id="form">

							<div class="formItem"><p>Racquet</p><input type="text" id="racquet-selector-js" name="gear[racquet]" value="{$inputData.gear.racquet}"/>
								<div class="suggestionsBox" id="suggestions" style="z-index: 500; display: none; ">
									<div class="suggestionList" id="autoSuggestionsList"></div>
								</div>
<!--								<div class="prev">
									<img src="images/temp/racqet1.jpg" alt="" width="50"/> Racquet name
								</div>-->
							</div>

							<div class="formItem formItemSpacer"><p>Bag</p><input type="text" name="gear[bag]" value="{$inputData.gear.bag}"/></div>

							<div class="formItem formItemSpacer"><p>Shoes</p><input type="text" name="gear[shoes]" value="{$inputData.gear.shoes}"/></div>

							<div class="formItem formItemSpacer"><p>Apparel</p><input type="text" name="gear[apparel][]" value="{$inputData.apparel.0}"/></div>

							<div class="formItem formItemSpacer toAdd"><p></p><input type="text" name="gear[apparel][]" value="{$inputData.apparel.1}"/></div>

							<div class="formItem formItemSpacer">
								<div class="prev"><a href="#" title="add more" onclick='$("div.toAdd:last").after("<div class=\"formItem formItemSpacer\"><p></p><input type=\"text\" name=\"gear[apparel][]\" value=\"\"/></div>"); return false;'>+ add more apparel</a></div>
							</div>

							<div class="formItem formItemSpacer"><p>Grip size</p>
								<select name="grip_size">
								{foreach from=$gripSize item=size}
								<option value="{$size}" {if $inputData.grip_size eq $size}selected="selected"{/if}>{$size}</option>
								{/foreach}
								</select>
							</div>
							<div class="formItem"><p>Shoe size</p>
								<select name="shoe_size">
								{foreach from=$shoeSize item=size}
								<option value="{$size}" {if $inputData.shoe_size eq $size}selected="selected"{/if}>{$size}</option>
								{/foreach}
								</select>
							</div>
							<div class="formItem"><p>Apparel size</p>
								<select name="apparel_size">
								{foreach from=$apparelSize item=size}
								<option value="{$size}" {if $inputData.apparel_size eq $size}selected="selected"{/if}>{$size}</option>
								{/foreach}
								</select>								
							</div>
							<div class="formItem"><p>{'Measurement units'|t}</p>
								<input {if !isset($inputData.units) || $inputData.units eq 'metric'}checked="checked"{/if} type="radio" name="units" value="metric" id="metric" class="radio" /><label for="metric">{'metric (EU)'|t}</label>
								<input {if $inputData.units eq 'imperial'}checked="checked"{/if} type="radio" name="units" value="imperial" id="imperial" class="radio"/><label for="imperial">{'imperial (US)'|t} </label>
							</div>		
							
							<div class="formItem formItemSpacer"><p>{'membership type'|t}</p>
								<input {if $inputData.premium eq 0}checked="checked"{/if}type="radio" name="premium" value="0" id="premium_0" class="radio"/><label for="imperial">{'Free membership'|t} </label><br />
								<input {if !isset($inputData.premium) || $inputData.premium eq 1}checked="checked"{/if} type="radio" name="premium" value="1" id="premium_1" class="radio" /><label for="metric">{'Premium membership'|t}</label><!--<a href="#">{'more info'|t}</a>-->
							</div>								


							<br/>


							<input type="hidden" id="racquet-selector-id-js" value="{$inputData.racquetId}" name="racquetId" />
							<div class="formSubmit "><input type="button" value="{'previous step'|t}" onclick="javascript: prev('{url label=registrationQuizStep2}') " /><input type="submit" name="submitForm" value="finish"/></div>
						</form>
					</div>
				</div>

			<div class="clearBoth"></div>
	</div>
</div>
<div class="backgroundFrame970Bottom"></div>

{literal}
<script type="text/javascript">
$('#racquet-selector-js').keyup(function() {
		var action = '{/literal}{url label=AjaxRacquetFinder}{literal}';
		var tmp = $(this);
		var dataString = 's='+tmp.val();
		$('#ajaxLoader').show();

		$.ajax({  
			type: "POST",  
			url: action, 
			data: dataString,  
			dataType: 'json',
			success: function(data, sTextStatus, oXMLHttpRequest) {
				var ret = '';
				$('#racquet-selector-id-js').val(0);
				$.each(data, function(i, item) {
					ret += '<li id="'+i+'" onclick="fill(\''+item+'\', \''+i+'\');">'+item+'</li>';
				});

				if(ret.length > 0) {
					$('#suggestions').show();
					$('#autoSuggestionsList').html(ret);
				}
				$('#ajaxLoader').hide();
				
				
				
			}
		});
});

	function fill(thisValue, id) {
		$('#racquet-selector-js').val(thisValue);
		$('#racquet-selector-id-js').val(id);
		setTimeout("$('#suggestions').hide();", 200);
	}
</script>
{/literal}
<div id="tmp"></div>